<template>
  <div id="blogArticleList">
    <div class="articleList">
      <ul style="margin: 0; padding: 0 10px" v-if="model == 'view'">
        <li
          v-for="item in articleListInfo"
          :key="item.id"
          style="list-style: none"
        >
          <blog-article-item
            :article-info="item"
            @load-article-by-type="loadArticleByType"
          ></blog-article-item>
        </li>
      </ul>
      <ul style="margin: 0; padding: 0 10px" v-if="model == 'manager'">
        <li
          v-for="item in articleListInfo"
          :key="item.id"
          style="list-style: none"
        >
          <article-manager-item
            :article-info="item"
            @load-article-by-type="loadArticleByType"
            @delete-article="deleteArticle"
          ></article-manager-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BlogArticleItem from "@/components/BlogArticleItem.vue";
import ArticleManagerItem from "./ArticleManagerItem.vue";
export default {
  data() {
    return {
      username: "",
    };
  },
  components: {
    BlogArticleItem,
    ArticleManagerItem,
  },
  props: ["articleListInfo", "model"],
  name: "BlogArticleList",
  methods: {
    pageChange(page) {
      this.$emit("page-change", page);
    },
    loadArticleByType(type) {
      this.$emit("load-article-by-type", type);
    },
    deleteArticle(articleInfo) {
      this.$emit("delete-article", articleInfo);
    },
  },
};
</script>

<style lang="less" scoped></style>
